<template>
	<view class="personal-container">
		<view class="userinfo-container">
			<image :src="userInfo.avatar" class="userinfo-avatar"></image>
			<view class="userinfo-other-contaienr">
				<view class="userinfo-other-group">
					<view class="userinfo-nickname">{{userInfo.nickname}}</view>
					<view class="userinfo-edit" @click="changeUserInfo">编辑信息</view>
				</view>
				<view class="userinfo-usage-data">
					<view class="userinfo-usage-data-item userinfo-usage-data-item-left">
						<view class="userinfo-usage-data-number">{{myCountInfo.total_music}}</view>
						<text class="userinfo-usage-data-unit">首弹唱歌曲</text>
					</view>
					<view class="userinfo-usage-data-item userinfo-usage-data-item-rigth">
						<view class="userinfo-usage-data-number">{{myCountInfo.total_play}}</view>
						<text class="userinfo-usage-data-unit">次弹唱次数</text>
					</view>
				</view>
			</view>
		</view>
		<view class="collect-recommend-group">
			<view class="collect-container" @click="jumpCollectionMusic">
				<view class="collect-infomation">
					<view class="collect-number">{{myCountInfo.total_collection}}</view>
					<text class="collect-number-unit">首</text>
				</view>
			</view>
			<view class="recommend-container"></view>
		</view>
		<view class="option-list">
			<view class="option-item-container" @click="hadlerContactus">
				<image src="/static/image/public/Customer.png" class="option-item-icon"></image>
				<view class="option-item-name">
					联系我们
				</view>
				<image src="/static/image/public/back.png" class="option-item-jump-icon"></image>
			</view>
			<view class="option-item-container" @click="hadlerLogout">
				<image src="/static/image/public/toggle.png" class="option-item-icon"></image>
				<view class="option-item-name">
					切换账号
				</view>
				<image src="/static/image/public/back.png" class="option-item-jump-icon"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { apiGetContactus } from "@/api/public";
	import { apiLogout, apiGetUserInfo, apiGetMyCount } from "@/api/user";

	let myCountInfo = reactive({
		total_collection: 0,
		total_music: 0,
		total_play: 0
	})

	let userInfo = reactive({
		username: "",
		user_id: "",
		nickname: "",
		avatar: "",
		mobile: "",
	})


	onShow(() => {
		updateUserInfoByStorage();
		getUserInfo();
		getMyCountInfo();
	})


	const getMyCountInfo = async () => {
		try {
			const response = await apiGetMyCount();
			myCountInfo = response
		} catch (err) {
			console.error(err);
		}
	}


	/**
	 * 从缓存更新最新的用户信息
	 */
	const updateUserInfoByStorage = () => {
		const storageInfo = uni.getStorageSync('userInfo');
		userInfo = storageInfo;
	}

	/**
	 * 获取用户信息
	 */
	const getUserInfo = async () => {
		try {
			const response = await apiGetUserInfo();
			uni.setStorageSync('userInfo', {
				username: response.username,
				user_id: response.user_id,
				nickname: response.nickname,
				avatar: response.avatar,
				mobile: response.mobile
			})
			updateUserInfoByStorage();
		} catch (err) {
			console.error(err);
		}
	}


	/**
	 * 切换账号/退出登录
	 */
	const hadlerLogout = async () => {
		uni.removeStorageSync("token");
		uni.reLaunch({
			url: "/pages/login/index"
		})
		await apiLogout()
	}

	/**
	 * 联系我们
	 */
	const hadlerContactus = async () => {
		const response = await apiGetContactus();
		uni.showModal({
			title: response.content,
			content: response.type_text,
			showCancel: false
		})
	}



	const changeUserInfo = () => {
		uni.navigateTo({
			url: "/pages/modify-info/index"
		})
	}

	const jumpCollectionMusic = () => {
		uni.navigateTo({
			url: "/pages/collection-music/index"
		})
	}
</script>
<style lang="scss" scoped>
	.personal-container {
		// user-select: none;
		width: 750rpx;
		padding: 32rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		user-select: none;

		.userinfo-container {
			width: 686rpx;
			height: 232rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			background: #242424;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.userinfo-avatar {
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.userinfo-other-contaienr {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				justify-content: s;
				width: 436rpx;
				height: 168rpx;
				padding-left: 26rpx;

				.userinfo-other-group {
					width: 436rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.userinfo-nickname {
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						width: 260rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
					}

					.userinfo-edit {
						width: 152rpx;
						height: 56rpx;
						border-radius: 8rpx;
						border: 2rpx solid #25DADA;
						line-height: 56rpx;
						text-align: center;
						color: #35D6DE;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.userinfo-ip {
					font-weight: 400;
					font-size: 24rpx;
					color: #8A8A8A;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				.userinfo-usage-data {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.userinfo-usage-data-item {
						display: flex;
						align-items: center;
						width: 50%;

						.userinfo-usage-data-number {
							max-width: 85rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
							font-weight: 400;
							font-size: 28rpx;
						}

						.userinfo-usage-data-unit {
							width: 120rpx;
							padding-left: 8rpx;
							color: #8A8A8A;
							font-size: 24rpx;
						}
					}

					.userinfo-usage-data-item-left {
						display: flex;
						justify-content: flex-start
					}

					.userinfo-usage-data-item-rigth {
						display: flex;
						justify-content: flex-end
					}
				}
			}
		}

		.collect-recommend-group {
			padding-top: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.collect-container {
				width: 332rpx;
				height: 256rpx;
				background-image: url("/static/image/home/collect.png");
				background-size: cover;
				position: relative;

				.collect-infomation {
					width: 160rpx;
					position: absolute;
					top: 168rpx;
					left: 10rpx;

					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;

					text-align: center;
					display: flex;
					align-items: baseline;
					justify-content: center;

					.collect-number {
						max-width: 140rpx;
						font-size: 32rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
					}

					.collect-number-unit {
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
			}

			.recommend-container {
				width: 332rpx;
				height: 256rpx;
				background-image: url("/static/image/home/recommend.png");
				background-size: cover;
			}
		}

		.option-list {
			width: 686rpx;
			box-sizing: border-box;
			margin-top: 48rpx;
			background: #242424;
			border-radius: 16rpx;
			position: relative;

			.option-item-container {
				height: 92rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:not(:last-child)::after {
					content: "";
					position: absolute;
					width: 622rpx;
					height: 1rpx;
					top: 92rpx;
					background-color: #4A4A4A,
				}

				.option-item-icon {
					width: 40rpx;
					height: 40rpx;
				}

				.option-item-name {
					width: 522rpx;
					padding: 0 16rpx;
				}

				.option-item-jump-icon {
					width: 28rpx;
					height: 28rpx;
				}
			}

		}
	}
</style>